<template>
	<div class="wrap">
		<div style="margin-bottom: 10px;" class="head flex flex-justify-between">
			<div class="head-pic">
				<img @click="viewImage(user.userIcon||default_portrait)" :src="user.userIcon||default_portrait"/>
			</div>
			<p class="text-btn" @click="selectFile">上传头像
				<input @change="upload" type="file" ref="file" class="hide"/>
			</p>
			
		</div>
		<div class="info-para flex flex-align-center flex-justify-between">
			<div class="flex">
				<p class="info-title">账户名称：</p>
				<p class="info-content">{{user.username}}</p>
			</div>
			<p class="text-btn" @click="editPwd">修改密码</p>
		</div>
		<div class="info-para flex flex-align-center flex-justify-between">
			<div class="flex">
				<p class="info-title">渠道账号：</p>
				<p class="info-content">{{user.phone}}</p>
			</div>			  
			<p class="text-btn">
				<el-switch v-model="user.queryglobalflag==0?false:true" @change="editAuthority"></el-switch>
				<span style="margin-right:10px">开启上级数据查看权限</span>
				<el-popover
					placement="top"
					title="提示"
					width="220"
					trigger="hover"
					content="开启后，则上级管理员/渠道可查看、操作你的集团客户信息">
					<el-button style="border: none;padding: 0;" slot="reference"><i class="el-icon-warning-outline" style="font-size:16px;"></i></el-button>
				</el-popover>
			</p>
		</div>
		<div class="info-para flex flex-align-center flex-justify-between">
			<div class="flex">
				<p class="info-title">账户余额：</p>
				<p class="info-content money">{{user.left_credit/100}}元</p>
			</div>
			<div class="flex flex-align-center">
				<a :href="baseUrl+'/channel/creditrecharge/activity.do'" class="btn" style="margin-right: 11px;">充值</a>
				<a :href="baseUrl+'/channel/creditrecharge/record.do'" class="text-btn">支出明细</a>
				<a :href="baseUrl+'/channel/buyerorder/list'" class="text-btn">收益明细</a>
			</div>
			
		</div>
		
		<edit-password ref="editPassword" style="z-index: 99999;" :show="editPwdVisible" @closeEditPwd="closeEditPwd"></edit-password>
		<view-img :src="imgSrc" v-if="showImg" @close="closeImg"></view-img>
	</div>
	
</template>

<script>
	import default_portrait from '@/assets/images/default_portrait2.png'
	import {baseUrl} from '@/utils/common'
	import EditPassword from '@/components/EditPassword'
	
	export default {
		name:'UserInfo',
		components:{
			EditPassword,
		},
		data(){
			return{
				default_portrait,
				baseUrl:baseUrl,
				uploading:false,
				editPwdVisible:false,
				queryglobalflag: 0  //0未开启，1开启
			}
		},
		computed:{
			user(){
				this.queryglobalflag = this.$store.state.user.queryglobalflag
				return this.$store.state.user
			}
		},
		mounted(){
			if(this.$route.params.flag){
				this.editPwdVisible=true
			}
		},
		methods:{
			selectFile(){
				if(this.uploading){
					return
				}
				this.$refs.file.value=''
				this.$refs.file.click()
			},
			async upload(){
				var file=this.$refs.file.files[0]
				this.uploading = true
				var formData=new FormData()
				formData.append('file',file)
				var res=await this.$request.uploadFile(formData)
				this.uploading = false
				if(res.code==0){
					var obj=res.objlist&&res.objlist[0]?res.objlist[0]:null
					if(!obj){
						this.msgError('上传失败')
						return
					}
					if(obj.code==0){
						var url=obj.uploadpath
						this.savePortrait(url)
					}else{
						this.msgError(obj.msg)
					}
				}else{
					this.msgError(res.msg)
				}
			},
			savePortrait(imgUrl){
				this.$request.savePortrait({
					userIcon:imgUrl
				}).then(async (res)=>{
					if(res.code==0){
						this.msgSuccess('上传成功')
						var userInfo = await this.$request.queryAccountInfo()
						this.$store.commit('setUser', userInfo)
					}else{
						this.msgError(res.msg)
					}
				})
			},
			editPwd(){
				this.editPwdVisible=true
			},
			closeEditPwd(){
				this.editPwdVisible=false
			},
			//修改权限
			editAuthority() {
				// console.log(this.queryglobalflag)
				this.$request.userEditqueryglobalflag({
					queryglobalflag: this.queryglobalflag==0?1:0
				}).then(async (res)=>{
					if(res.code==0){
						
						var userInfo = await  this.$request.queryAccountInfo()
						// this.queryglobalflag = userInfo.queryglobalflag
						this.$store.commit('setUser', userInfo)
					}else{
						this.msgError(res.msg)
					}
				})
			},


		}
	}
</script>

<style scoped="" lang="scss">
.wrap{
	padding: 30px 99px 0 30px;
	.head{
		align-items: flex-end;
		.head-pic{
		width: 80px;
		height: 80px;
			img{
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
	.text-btn{
		font-size: 16px;
		color: #0088EA;
		cursor: pointer;
		margin-right: 0;
		margin-left: 29px;
	}
	.btn{
		text-align: center;
		line-height: 40px;
		width: 100px;
		height: 40px;
		background: #0088EA;
		border-radius: 6px;
		color: #fff;
		cursor: pointer;
	}
	.info-para{
		height: 58px;
		.info-title{
			font-size: 16px;
			color: #333;
		}
		.info-content{
			font-size: 16px;
			color: #333;
			font-weight: bold;
		}
		.money{
			color: #F39800;
		}
	}
}

>>>.el-switch{
	margin-right: 10px;
    margin-top: -2px;
}
>>>.el-button:focus, .el-button:hover{
	color: #409EFF; 
    border-color: #fff;
    background-color: #fff;
}
</style>